<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				display: flex;
				width: 500px;
				height: 100px;
				text-align: center;
				flex-wrap: nowrap;
				justify-content: space-around;
				border: 3px solid #0000FF;
			}
			div.b{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				border: 2px solid #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="b"></div>
			<div class="b"></div>
			<div class="b"></div>
			<div class="b"></div>
			<div class="b"></div>
		</div>
		
		<script type="text/javascript">
			var b = document.getElementsByClassName("b")
			var time = new Date('2021-02-11 18:00:00')//设定新时间
			// console.log(time)
			
			var daojishi = setInterval(function(){
				var localtime = new Date();//获取当前时间
				var times = time - localtime;//times为总毫秒差
				
				var hao = (times % 1000);//当前剩余毫秒数
				var sec = parseInt(times/1000)
				var cursec = (sec % 60)
				var min = parseInt((sec/60)) % 60;
				
				var hour = parseInt((sec/3600))%24;//小时
				var days = parseInt((sec/86400))%365;//天
				b[0].innerHTML = days + '天';
				b[1].innerHTML = hour + '时';
				b[2].innerHTML = min + '分';
				b[3].innerHTML = cursec + '秒';
				//分别给每一块的内容赋值；
				//注意毫秒处bug 0~9需+"00"  10~99 需+"0"
				var res = '';
				if(hao < 10){
					res = "00" + hao;
				}else if(hao >= 10 && hao < 100){
					res = "0" + hao;
				}else{
					res = hao;
				}
				
				b[4].innerHTML = res + '毫秒';
				
			},1)
		</script>
	</body>
</html>
